<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/list.css">
</head>

<body>

  <div class="header">
    啥都有 · 商品列表页

    <p>
      <span class="on active"><a href="/pages/cart">查看购物车</a> <a href="/pages/index">返回首页</a></span>
    </p>
  </div>

  <div class="container filterBox">
    <div class="box cate_box">
      <div class="left">分类 : </div>
      <ul>
        <li class="active">全部</li>
        <li>电脑</li>
      </ul>
    </div>
    <div class="box filter_box">
      <div class="left">筛选 : </div>
      <ul>
        <li class="active filter" data-index="">全部</li>
        <li class="filter" data-index="hot">热销</li>
        <li class="filter" data-index="sale">折扣</li>
      </ul>
    </div>
    <div class="box sale_box">
      <div class="left">折扣类型 : </div>
      <ul>
        <li class="active sale" data-index="10">全部</li>
        <li class="sale" data-index="5">5</li>
        <li class="sale" data-index="6">6</li>
        <li class="sale" data-index="7">7</li>
        <li class="sale" data-index="8">8</li>
        <li class="sale" data-index="9">9</li>
      </ul>
    </div>
    <div class="box search_box">
      <div class="left">搜索 : </div>
      <input class="search_inp" type="text">
    </div>
    <div class="box sort_box">
      <div class="left">排序 : </div>
      <ul>
        <li class="active sort" data-type="_id" data-method="ASC">综合升序</li>
        <li class="sort" data-type="_id" data-method="DESC">综合降序</li>
        <li class="sort" data-type="current_price" data-method="ASC">价格升序</li>
        <li class="sort" data-type="current_price" data-method="DESC">价格降序</li>
        <li class="sort" data-type="sale_type" data-method="ASC">折扣升序</li>
        <li class="sort" data-type="sale_type" data-method="DESC">折扣降序</li>
      </ul>
    </div>
    <div class="box pagi_box"></div>
  </div>

  <ul class="container goods_list"></ul>

  <div class="footer">
    网页底部
  </div>

  <!-- 分页器模板 -->
  <script id="pagi_template" type="text/html">

    <span class="prev<%= current === 1 ? ' disabled' : '' %>">&lt;</span>
    <span class="total"><%= current %>/<%= total %></span>
    <span class="next<%= current === total ? ' disabled' : ''%>">&gt;
      
    </span>
    <select>
      <option value="8"<%= pagesize === 8 ? 'selected':''%> >8</option>
      <option value="12"<%= pagesize === 12 ? 'selected':''%> >12</option>
      <option value="16"<%= pagesize === 16 ? 'selected':''%> >16</option>
      <option value="20"<%= pagesize === 20 ? 'selected':''%> >20</option>
    </select>
    <input class="search" type="text" value="">
    <button class="go" data-total="<%= total%>">跳转</button>
  </script>

  <!-- 商品模板 -->
  <script id="list_template" type="text/html">
    <% for(var i = 0; i < list.length; i++){ %>
    <li data-id="<%= list.goods_id %>">
      <div class="show">
        <img src="<%= list[i].img_big_logo %>" alt="">
      <%if (list[i].is_hot) {%>
        <span class="hot">HOT</span>
        <% }%>
      <% if (list[i].is_sale) {%>
        <span class="sale">SALE</span>
      <% }%>
      </div>
      <div class="info">
        <p class="desc"><%= list[i].title %></p>
        <p class="price">
          <span class="current">￥<%= list[i].current_price %></span>
          <span class="old">￥<%= list[i].price %> </span>
        </p>
        <p class="btns">
          <button data-id=<%= list[i].goods_id %> class="addCart">加入购物车</button>
          <button class="buy">立即购买</button>
        </p>
      </div>
    </li>
    <%}%>
  </script>

  <script src="/static/vander/jquery/jquery.min.js"></script>
  <script src="/static/vander/template/template-web.js"></script>
  <script src="/static/js/list.js"></script>
</body>

</html>